<template>
    <div class="rightsRole_container">
        <el-row type="flex" align="middle">
            <el-col :span="1" :offset="10">
                <i class="el-icon-thumb"></i>
            </el-col>
            <el-col :span="3">
                <h1>角色列表</h1>
            </el-col>
             <el-col :span="3" :offset="5">
                <p class="bottomText">共计 <span style="color:#409eff">{{rolesCount}}</span> 个角色</p>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span=22 :offset="1">
                <el-table
                    :data="rolesList"
                    :border="true"
                    :stripe="true"
                    align="center"
                    class="rolesTable"
                    height="50vh"
                >
                    <el-table-column
                        type="expand"
                        width="55"
                    >
                        <template slot="header">
                            <el-tooltip content="添加角色" placement="top-end">
                                <el-button
                                    type="success"
                                    size="mini"
                                    icon="el-icon-plus"
                                    circle
                                    @click="openNewRoledialog"
                                >
                                </el-button>
                            </el-tooltip>
                        </template>
                        <template v-slot="treeData">
                            <el-row
                                type="flex"
                                justify="center"
                                align="middle"
                            v-show="treeData.row.children==''"
                            >
                                <el-col :span="2">
                                    <h3>暂无权限</h3>
                                </el-col>
                            </el-row>
                            <el-row
                                type="flex"
                                justify="center"
                                align="middle"
                                class="tableRow1"
                                v-for="firstRole in treeData.row.children"
                                :key="firstRole.id"
                            >
                                <el-col :span="4" :offset="1">
                                    <el-tag
                                        effect="dark"
                                        type="danger"
                                        size="small"
                                        closable
                                       @close="askDeleteRights(treeData.row,firstRole.id,treeData.row.roleName,firstRole.authName)"
                                    >
                                        {{firstRole.authName}}
                                    </el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </el-col>
                                <el-col :span="19">
                                    <el-row
                                        type="flex"
                                        align="middle"
                                        class="tableRow2"
                                        v-for="secondRole in firstRole.children"
                                        :key="secondRole.id"
                                    >
                                        <el-col :span="4" :offset="1">
                                            <el-tag
                                                effect="dark"
                                                type="success"
                                                size="small"
                                                closable
                                                @close="askDeleteRights(treeData.row,secondRole.id,treeData.row.roleName,secondRole.authName)"
                                            >
                                                {{secondRole.authName}}
                                            </el-tag>
                                            <i class="el-icon-caret-right"></i>
                                        </el-col>
                                        <el-col :span="13" :offset="1">
                                            <el-tag
                                                effect="dark"
                                                size="small"
                                                closable
                                                v-for="thirdRole in secondRole.children"
                                                :key="thirdRole.id"
                                                @close="askDeleteRights(treeData.row,thirdRole.id,treeData.row.roleName,thirdRole.authName)"
                                            >
                                                {{thirdRole.authName}}
                                            </el-tag>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="序号"
                        type="index"
                        width="55"
                    >
                    </el-table-column>
                    <el-table-column
                        v-for="item in tableinfo"
                        :key="item.index"
                        :prop="item.rolesInfoItem"
                        :label="item.rolesInfoTD"
                        :min-width="item.rolesTDWith"
                        sortable
                    >
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        min-width="60"
                    >
                    <template v-slot="beforeEdittreeData">
                        <el-button-group>
                            <el-tooltip content="编辑角色" placement="top-end">
                                <el-button
                                    type="primary"
                                    icon="el-icon-edit"
                                    size="mini"
                                    @click="openEditRoletDialog(beforeEdittreeData.row.id)"
                                >
                                </el-button>
                                </el-tooltip>
                            <el-tooltip content="分配权限" placement="top">
                                <el-button 
                                    type="warning" 
                                    icon="el-icon-setting"
                                    size="mini"
                                    @click="askGiveRolesRights(beforeEdittreeData.row)"
                                >
                                </el-button>
                                </el-tooltip>
                            <el-tooltip content="删除角色" placement="top-start">
                                <el-button
                                    type="danger"
                                    icon="el-icon-delete"
                                    size="mini"
                                    @click="askDeleteRole(beforeEdittreeData.row.id, beforeEdittreeData.row.roleName)"
                                >
                                </el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-dialog 
            title="新增角色"
            :visible.sync="dialogNewRoleVisible"
            width="35%"
            @close="closeResetNewRoleDialog(false)"
        >
                <el-form 
                    :model="newRoleForm"
                    :rules="newRoleFormRules"
                    ref="newRoleFormRef"
                    status-icon 
                    label-width="92px"
                >
                    <el-form-item label="新角色名称" prop="newRoleName">
                        <el-input
                            v-model="newRoleForm.newRoleName"
                            maxlength="10"
                            show-word-limit
                            clearable
                            placeholder="请输入新角色名称"
                            @keyup.native.enter="pushNewRoleForm"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="新角色描述" prop="newRoleDesc">
                        <el-input
                            v-model="newRoleForm.newRoleDesc"
                            type="textarea"
                            :autosize="{minRows: 2, maxRows: 5}"
                            maxlength="30"
                            clearable
                            placeholder="请输入新角色描述"
                            resize="none"
                            @keyup.native.enter="pushNewRoleForm"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item class="newFormButton">
                        <el-button type="primary" size="small" @click="pushNewRoleForm">提 交</el-button>
                        <el-button type="info" size="small" @click="closeResetNewRoleDialog(true)">重 置</el-button>
                        <el-button size="small" @click="rememberNewForm">暂 存</el-button>
                    </el-form-item>
                    </el-form>
        </el-dialog>
        <el-dialog 
            title="编辑角色"
            :visible.sync="dialogEditRoleVisible"
            width="35%"
            @close="closeResetEditRoleDialog(false)"
        >
                <el-form 
                    :model="editRoleForm"
                    :rules="editRoleFormRules"
                    ref="editRoleFormRef"
                    status-icon
                    label-width="auto"
                    label-position="top"
                >
                    <el-form-item>
                        <el-descriptions :column="1" border>
                            <el-descriptions-item>
                                <template slot="label">
                                        <i class='el-icon-medal'></i>
                                        当前角色名称
                                </template>
                                {{beforEditRoleName}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                        <i class="el-icon-edit-outline"></i>
                                        当前角色描述
                                </template>
                                {{beforEditRoleDesc}}
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-form-item>
                    <el-form-item label="编辑角色名称" prop="editRoleName">
                        <el-input
                            v-model="editRoleForm.editRoleName"
                            maxlength="10"
                            show-word-limit
                            clearable
                            placeholder="请输入编辑的后角色名称"
                            @keyup.native.enter="checkEditRoleDialog(beforEditRoleId)"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="编辑角色描述" prop="editRoleDesc">
                        <el-input
                            v-model="editRoleForm.editRoleDesc"
                            type="textarea"
                            :autosize="{minRows: 2, maxRows: 5}"
                            maxlength="30"
                            clearable
                            placeholder="请输入编辑后的角色描述"
                            resize="none"
                            @keyup.native.enter="checkEditRoleDialog(beforEditRoleId)"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item class="newFormButton">
                        <el-button type="primary" size="small" @click="checkEditRoleDialog(beforEditRoleId)">提 交</el-button>
                        <el-button type="info" size="small" @click="closeResetEditRoleDialog(true)">重 置</el-button>
                        <el-button size="small" @click="rememberEditForm">暂 存</el-button>
                    </el-form-item>
                    </el-form>
        </el-dialog>
        <el-dialog 
            title="分配角色权限"
            :visible.sync="dialogRolesVisible"
            width="32%"
            center
            @close="clearData(rememberRoleID)"
        >
            <span v-show="rememberRes">
                <el-alert title="已加载暂存的分配权限信息！" type="success" show-icon ></el-alert>
            </span>
            <el-tree
                :data="nowRolesAllRightsStatus"
                :props="nowRolesRightSprops"
                :highlight-current="dialogRolesVisible"
                show-checkbox
                accordion
                node-key="id"
                :default-checked-keys="nowRolesOwnRightsStatus"
                :default-expanded-keys="[nowRolesOwnRightsStatus[0]]"
                ref="treeRef"
                @check="changeRestoreStatus"
                @keyup.native.enter="pushRoleRights"
            >
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="pushRoleRights">提 交</el-button>
                <el-button size="small" :disabled="rememberStatus"  @click="rememberRoleRight(rememberRoleID)" >暂 存</el-button>
                <el-button type="info" size="small" :disabled="restoreStatus" @click="nowRoleRight(rememberRoleID)">复 原</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default({
    name:'rightsRole',
    data(){
        return {
            rolesCount: 0,
            rolesList: [],
            tableinfo: [
                {
                    rolesInfoItem: 'id',
                    rolesInfoTD: ' \0 \0 \0 \0 角色ID',
                    rolesTDWith: '40'
                },
                {
                    rolesInfoItem: 'roleName',
                    rolesInfoTD: ' \0 \0 \0 \0 角色名称',
                    rolesTDWith: '60'
                },
                {
                    rolesInfoItem: 'roleDesc',
                    rolesInfoTD: ' \0 \0 \0 \0 角色描述',
                    rolesTDWith: '60'
                }
            ],
            dialogNewRoleVisible:false,
            dialogEditRoleVisible:false,
            dialogRolesVisible: false,
            nowRolesAllRightsStatus:[],
            nowRolesOwnRightsStatus:[],
            nowRolesRightSprops:{
                children:'children',
                label: 'authName'
            },
            rememberRes: false,
            rememberRoleID:'',
            rememberRoleRightList:[],
            rememberStatus: true,
            restoreStatus: true,

            newRoleForm:{
                newRoleName:'',
                newRoleDesc:''
            },
            newRoleFormRules:{
                newRoleName:[
                    {
                        required: true,
                        message: '角色名称不能为空！',
                        validator:'',
                        trigger: 'blur'
                    },
                    {
                        max: 10,
                        message: '角色名称过长！',
                        trigger: 'blur'
                    },
                ],
                newRoleDesc:[
                    {
                        max: 30,
                        message: '角色描述过长！',
                        trigger: 'blur'
                    }
                ]
            },

            beforEditRoleId:'',
            beforEditRoleName:'',
            beforEditRoleDesc:'',
            editRoleForm:{
                editRoleName:'',
                editRoleDesc:''
            },
            editRoleFormRules:{
                editRoleName:[
                    {
                        required: true,
                        message: '角色名称不能为空！',
                        validator:'',
                        trigger: 'blur'
                    },
                    {
                        max: 10,
                        message: '角色名称过长！',
                        trigger: 'blur'
                    },
                ],
                editRoleDesc:[
                    {
                        max: 30,
                        message: '角色描述过长！',
                        trigger: 'blur'
                    }
                ]
            },
        }
    },
    created(){
        this.getRolesList();
        this.clearAllRolesID();
    },
    methods: {
        checkWindowLoad(){
            if(sessionStorage.getItem(this.$route.path)){
                sessionStorage.setItem(this.$route.path,false);
            }else{
                sessionStorage.setItem(this.$route.path,true);
            }
        },
        async getRolesList(){
            const { data: res } = await this.$http.get('roles')
            if(res.meta.status == 200){
                this.rolesList = res.data
                this.rolesCount = res.data.length
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '获取角色列表失败！'
                    }
                )
            }
        },
        askDeleteRights(value1,value2,value3,value4){
            this.$confirm('确定取消角色 '+value3+'<br/>的 ' +value4+' 权限吗？', '取消权限提示', {
                                confirmButtonText: '继续',
                                cancelButtonText: '返回',
                                type: 'warning',
                                dangerouslyUseHTMLString: true
                            }).then(() => {
                                this.deleteRights(value1,value2,value3,value4);
                            }).catch(() => {
                                this.$message({
                                    center:true,
                                    showClose: true,
                                    duration:2000,
                                    message:'取消操作！'
                                })
                            });
        },
        async deleteRights(value1,value2,value3,value4){
            const { data: res } = await this.$http.delete(`roles/${value1.id}/rights/${value2}`);
            if( res.meta.status == 200 ){
                value1.children = res.data;
                return this.$message({
                    center:true,
                    showClose: true,
                    type: 'success',
                    duration:2000,
                    message: '取消角色 '+value3+' 的 '+value4+' 权限成功!'
                })
            }else{
                return this.$message({
                    center:true,
                    showClose: true,
                    type: 'error',
                    duration:2000,
                    message: '取消权限失败!'
                })
            }
        },
        openRolesRightsDialog(value){
            this.dialogRolesVisible = !this.dialogRolesVisible;
            this.rememberRoleID = value;
            if(sessionStorage.getItem(value)){
                this.restoreStatus = false
            }else{
                this.restoreStatus = true
            }
        },
        async askGiveRolesRights(fatherNode){
            if(sessionStorage.getItem(fatherNode.id)){
                this.nowRolesOwnRightsStatus = [ sessionStorage.getItem(fatherNode.id) ]
                this.openRolesRightsDialog(fatherNode.id)
                this.showRemembeRres()
            }else{   
                const { data: res } = await this.$http.get('rights/tree')
                if(res.meta.status == 200){
                    this.nowRolesAllRightsStatus = res.data;
                    this.getLeafKeys(fatherNode,this.nowRolesOwnRightsStatus);
                    this.openRolesRightsDialog(fatherNode.id);
                }else{
                    return this.$message(
                        {
                            center:true,
                            showClose: true,
                            type: 'error',
                            duration:2000,
                            message: '获取权限列表失败！'
                        }
                    )
                }
            }
        },
        //递归获取底层数据
        getLeafKeys(node,arr){
            if(!node.children){
                return arr.push(node.id)
            }else{
                node.children.forEach(element => 
                    this.getLeafKeys(element,arr)
                )
            };
        },
        clearData(value){
            this.nowRolesOwnRightsStatus = [];
            if(sessionStorage.getItem(value)){
                this.rememberStatus = false;
                this.restoreStatus = false
            }else{
                this.rememberStatus = true;
                this.restoreStatus = true
            }
        },
        rememberRoleRight(value){
            this.rememberRoleRightList = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys()
            ]
            if(this.rememberRoleRightList==''){
                this.rememberRoleRightList = ['000']
            }
            sessionStorage.setItem(value, this.rememberRoleRightList);
            if(sessionStorage.getItem(value)){
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '暂存权限成功！'
                    }
                );
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '暂存权限失败！'
                    }
                );
            }
        },
        showRemembeRres(){
            this.rememberRes = true;
            setTimeout(() => {
                this.rememberRes = false;
            }, 2000);
        },
        async nowRoleRight(value){
            if(window.sessionStorage.getItem(value)){
                window.sessionStorage.removeItem(value)
            }
            const { data: res } = await this.$http.get('rights/tree')
            if(res.meta.status == 200){
                this.nowRolesAllRightsStatus = res.data;
                this.restoreStatus = true;
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '复原权限列表成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '复原权限列表失败！'
                    }
                )
            }
        },
        changeRestoreStatus(){
            this.rememberStatus = false;
            this.restoreStatus = false;
        },
        clearAllRolesID(){
        var sessionStoragesList = Object.keys(sessionStorage)
        for(var i = 0; i < sessionStoragesList.length; i++){
            if(!isNaN(sessionStoragesList[i])){
                window.sessionStorage.removeItem(sessionStoragesList[i])
            }
        }
        },
        async pushRoleRights(){
            let editRoleRightsIDList = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys()
            ]
            let editRoleRightsIDListJosnStr = editRoleRightsIDList.join(',');
            const { data: res } = await this.$http.post(
                `roles/${this.rememberRoleID}/rights`,
                {rids:editRoleRightsIDListJosnStr}
            )
            if( res.meta.status == 200 ){
                window.sessionStorage.removeItem(this.rememberRoleID);
                this.getRolesList();
                this.dialogRolesVisible =false;
                return this.$message({
                    center:true,
                    showClose: true,
                    type: 'success',
                    duration:2000,
                    message: '修改角色 '+this.nowRolesAllRightsStatus.authName+' 的权限成功!'
                })
            }else{
                return this.$message({
                    center:true,
                    showClose: true,
                    type: 'error',
                    duration:2000,
                    message: '修改角色 '+this.nowRolesAllRightsStatus.authName+' 的权限失败!'
                })
            }
        },
        openNewRoledialog(){
            this.dialogNewRoleVisible = !this.dialogNewRoleVisible;
            const newRoleFormStr = window.sessionStorage.getItem('newRoleForm');
            if(newRoleFormStr){
                this.newRoleForm = Object.assign({},this.newRoleForm,JSON.parse(sessionStorage.getItem('newRoleForm')))
            }
        },
        closeResetNewRoleDialog(flag){
            this.$refs.newRoleFormRef.resetFields();
            if(flag){
                sessionStorage.removeItem('newRoleForm');
            }
        },
        rememberNewForm(){
            sessionStorage.setItem('newRoleForm', JSON.stringify(this.newRoleForm));
            if(sessionStorage.getItem('newRoleForm')){
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '暂存信息成功！'
                    }
                );
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '暂存信息失败！'
                    }
                );
            }
        },
        async pushNewRoleForm(){
            if(this.newRoleForm.newRoleDesc =='' && this.newRoleForm.newRoleName !=''){
                this.newRoleForm.newRoleDesc = '暂无描述'
            }
            const { data: res } = await this.$http.post('roles',{
                roleName: this.newRoleForm.newRoleName,
                roleDesc: this.newRoleForm.newRoleDesc
            });
            if(res.meta.status == 201){
                this.closeResetNewRoleDialog(true);
                this.getRolesList();
                this.dialogNewRoleVisible =! this.dialogNewRoleVisible
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '角色 '+this.newRoleForm.newRoleName+res.meta.msg
                    }                            
                )
            }else{
                this.innerVisible = !this.innerVisible;
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        duration:2000,
                        message: res.meta.msg
                    }                            
                )
            }
        },
        async openEditRoletDialog(value){
            this.dialogEditRoleVisible = true;
            this.beforEditRoleId = value;
            const { data: res } = await this.$http.get('roles/' + this.beforEditRoleId)
            if(res.meta.status == 200){
                this.beforEditRoleName = res.data.roleName;
                this.beforEditRoleDesc = res.data.roleDesc;
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: res.meta.msg
                    }                            
                )                
            }
            const editRoleFormStr = window.sessionStorage.getItem('editRoleForm');
            if(editRoleFormStr){
                this.editRoleForm = Object.assign({},this.editRoleForm,JSON.parse(sessionStorage.getItem('editRoleForm')))
            }
        },
        closeResetEditRoleDialog(flag){
            this.$refs.editRoleFormRef.resetFields();
            if(flag){
                sessionStorage.removeItem('editRoleForm');
            }            
        },
        rememberEditForm(){
            sessionStorage.setItem('editRoleForm', JSON.stringify(this.editRoleForm));
            if(sessionStorage.getItem('editRoleForm')){
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '暂存信息成功！'
                    }
                );
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '暂存信息失败！'
                    }
                );
            }
        },
        checkEditRoleDialog(value){
            this.$refs.editRoleFormRef.validate(valid=>{
                if(valid){
                    if(this.beforEditRoleDesc !='' && this.editRoleForm.editRoleDesc ==''){
                        this.$confirm('角色描述有助于角色管理，<br/>确定清除角色 '+this.editRoleForm.editRoleName+'<br/>的角色描述吗？', '清除提示', {
                            confirmButtonText: '继续',
                            cancelButtonText: '返回',
                            type: 'warning',
                            dangerouslyUseHTMLString: true
                        }).then(() => {
                            this.pushEditRoleForm(value);
                        this.$message({
                            center:true,
                            showClose: true,
                            type: 'success',
                            duration:2000,
                            message: '清除成功!'
                        });
                        }).catch(() => {
                            this.$message({
                                center:true,
                                showClose: true,
                                duration:2000,
                                message:'清除取消'
                            })
                        });
                    }else{
                        this.pushEditRoleForm(value);
                    }
                }
            })
        },
        async pushEditRoleForm(value){
           if(this.editRoleForm.editRoleDesc == ''){
               this.editRoleForm.editRoleDesc = '暂无描述'
           }
            const { data: res } = await this.$http.put('roles/'+value,
            {
                roleName: this.editRoleForm.editRoleName,
                roleDesc: this.editRoleForm.editRoleDesc
            })
            if(res.meta.status == 200){
                this.closeResetEditRoleDialog(true);
                this.openEditRoletDialog(value);
                this.getRolesList();
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '编辑角色 '+this.beforEditRoleName+' 信息成功！'
                    }
                )
            }else{
                console.log(this.beforEditId)
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '编辑角色 '+this.beforEditRoleName+' 信息失败！'
                    }
                )
            }
        },
        askDeleteRole(value1,value2){
            this.$confirm('<span style="color:red;font-weight:bold">注：删除操作不可逆！</span>'+'<br/>'+'请确认是否删除角色 '+value2,'删除角色提示', {
                confirmButtonText: '删除',
                cancelButtonText: '返回',
                type: 'warning',
                dangerouslyUseHTMLString: true
            }).then(() => {
                this.deleteRole(value1,value2);
            this.$message({
                center:true,
                showClose: true,
                type: 'success',
                duration:2000,
                message: '开始执行删除角色 '+value2
            });
            }).catch(() => {
                this.$message({
                    center:true,
                    showClose: true,
                    duration:2000,
                    message: '取消删除角色 '+value2
                })
            });
        },
        async deleteRole(value1,value2){
            const { data: res} = await this.$http.delete('roles/'+ value1)
            if(res.meta.status == 200){
                this.getRolesList();
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'success',
                        duration:2000,
                        message: '删除角色 '+value2+' 成功！'
                    }
                )
            }else{
                return this.$message(
                    {
                        center:true,
                        showClose: true,
                        type: 'error',
                        duration:2000,
                        message: '删除角色 '+value2+' 失败！'
                    }
                )
            }
        },
    }
})
</script>

<style lang="less" scoped>
    .rightsRole_container{
        width: 80vw;
        background-color: #fff;
        padding:29px 30px;
        margin:5vh auto;
        border-radius: 15px;
        box-shadow: 0 1px 15px #cbcbcb;
        h1{
            color: #3a2c3b;
            letter-spacing: 6px;
        }
        .rolesTable{
            width: 66vw;
            margin: 10px auto 20px auto;
            .el-tag{
                margin: 15px 1px;
            }
            .tableRow1{
                margin: 0 40px;
                border-bottom: solid 1px #2495e7;
            }
            .tableRow2{
                border-bottom: solid 1px #cbcbcb;
            }
            .tableRow1:last-child,.tableRow2:last-child{
                border: none;
            }
        }
        .newFormButton{
            text-align: right;
            margin:0;
        }
    }
</style>